<template>
  <div class="header">
    <div class="header_second">
      <div class="header_third">
        <!-- <i class="el-icon-s-fold"></i> -->
        <el-button
          class="goback"
          icon="el-icon-back"
          circle
          @click="$router.go(-1)"
          size="mini"
        ></el-button>

        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-if="this.$route.meta.title != '首页'">{{
            this.$route.meta.title
          }}</el-breadcrumb-item>
          <el-breadcrumb-item v-else></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-dropdown @command="handleCommand" v-if="name == '请登录'">
        <span class="el-dropdown-link" @click="login">
          {{ getName }}
          <i class="el-icon-arrow-right el-icon--right"></i>
        </span>
      </el-dropdown>
      <el-dropdown @command="handleCommand" v-else>
        <span class="el-dropdown-link">
          {{ getName }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
// 引入vuex的辅助函数

export default {
  data() {
    return {
      name: "",
    };
  },
  created() {
    // console.log(JSON.parse(localStorage.getItem("userInfo")).username) || "";
    // console.log(this.$route.meta.title);
    // this.name = JSON.parse(localStorage.getItem("userInfo")).username || "";
  },
  methods: {
    handleCommand(command) {
      if (command === "logout") {
        this.$store.commit("clearUserInfo");
        this.$router.push("/login");
      }
    },
    login() {
      this.$router.push("login");
    },
  },
  computed: {
    getName() {
      if (localStorage.getItem("userInfo")) {
        return (this.name =
          JSON.parse(localStorage.getItem("userInfo")).username || "");
      } else {
        return (this.name = "请登录");
      }
    },
  },
};
</script>

<style scoped>
.header {
  width: 100%;
  height: 100%;
  background: #ffffff;
}
.header_second {
  height: 100%;
  line-height: 100%;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header_third {
  margin-left: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-breadcrumb {
  margin-left: 15px;
}
.el-button.is-circle {
  padding: 8;
}
.goback {
  /* padding: 6; */
  font-size: 12px;
  margin-left: 15px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
  float: right;
}

.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>